<template>
    <div id="scenicOrder">
        <div>
            <el-row>
                <el-col :span="3"> 
                    <el-input
                        placeholder="请输入用户名称"
                        v-model="loginName"
                        clearable>
                    </el-input>
                </el-col>
                <el-col :span="2" :push="0" :offset="1"><el-button icon="el-icon-search" @click="getOredrByPage()" circle></el-button></el-col>
                <el-col :span="2" :push="2"><el-button type="primary" @click="dialogVisible=true" round>新增</el-button></el-col>
            </el-row>
            <el-row>
                <el-table
                v-loading="loading"
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="orderNo"
                label="订单编号"
                width="180">
                </el-table-column>
                <el-table-column
                prop="loginName"
                label="用户名"
                width="100">
                </el-table-column>
                <el-table-column
                prop="name"
                label="出行人"
                width="110">
                </el-table-column>
                <el-table-column
                prop="identity"
                label="出行人证件"
                width="180">
                </el-table-column>
                <el-table-column
                prop="price"
                label="票价"
                width="80">
                </el-table-column>
                <el-table-column
                prop="scenicName"
                label="景区名"
                width="100">
                </el-table-column>
                <el-table-column
                prop="purchaseTime"
                label="购买时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="createTime"
                label="开始时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="endTime"
                label="到期时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="orderStatus"
                label="订单状态">
                <template slot-scope="scope">
                    <p>
                        {{scope.row.orderStatus==1?"未出行" :scope.row.orderStatus==2?"未评论" :scope.row.orderStatus==0?"未支付" :"已取消"}}
                    </p>
                </template>
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="150">
                <template slot-scope="scope">
                    <el-button @click="scenicOrderEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="removeDataById(scope.row.id)" type="text" size="small" style="color: red;">删除</el-button>
                </template>
                </el-table-column>
                </el-table>
                <el-row style="text-align: center;">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 7, 9]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
                    </el-pagination>          
                </el-row>
            </el-row>
            <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
                <el-form :model="scenicOrderForm" :rules="scenicOrderForm" ref="scenicOrderForm">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="scenicOrderForm.loginName" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="出行人" :label-width="formLabelWidth">
                        <el-input v-model="scenicOrderForm.name" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="出行人证件" :label-width="formLabelWidth">
                        <el-input v-model="scenicOrderForm.identity" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="景区名称" :label-width="formLabelWidth">
                        <el-select v-model="provinceId" placeholder="请选择">
                            <el-option
                            v-for="item in one"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="getCity()">
                            </el-option>
                        </el-select>
                        <el-select v-model="cityId" placeholder="请选择城市">
                            <el-option
                            v-for="item in two"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="getScenic()">
                            </el-option>
                        </el-select>
                        <el-select v-model="scenicId" placeholder="请选择景区">
                            <el-option
                            v-for="item in three"
                            :key="item.id"
                            :label="item.scenicName"
                            :value="item.id"
                             @click.native="getTicketPrice()">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="门票价格" :label-width="formLabelWidth">
                        <el-input v-model="scenicOrderForm.price" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="入场时间" :label-width="formLabelWidth">
                        <el-date-picker
                        v-model="scenicOrderForm.createTime"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单状态" :label-width="formLabelWidth">
                        <el-select v-model="scenicOrderForm.orderStatus" placeholder="请选择订单状态">
                            <el-option
                            v-for="item in orderStatus"
                            :key="item.id"
                            :label="item.status"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveOredr()">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="修改订单" :visible.sync="dialogVisibleUpd" width="50%">
                <el-form :model="scenicOrderForm1" :rules="scenicOrderForm1" ref="scenicOrderForm1">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="scenicOrderForm1.loginName" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="出行人" :label-width="formLabelWidth">
                        <el-input v-model="scenicOrderForm1.name" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="出行人证件" :label-width="formLabelWidth">
                        <el-input v-model="scenicOrderForm1.identity" autocomplete="off" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="景区名称" :label-width="formLabelWidth">
                        <el-select v-model="scenicOrderForm1.provinceId" disabled filterable placeholder="请选择">
                            <el-option
                            v-for="item in one"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="getCity()">
                            </el-option>
                        </el-select>
                        <el-select v-model="scenicOrderForm1.cityId" disabled placeholder="请选择城市">
                            <el-option
                            v-for="item in two"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="getScenic()">
                            </el-option>
                        </el-select>
                        <el-select v-model="scenicOrderForm1.scenicId" disabled placeholder="请选择景区">
                            <el-option
                            v-for="item in three"
                            :key="item.id"
                            :label="item.scenicName"
                            :value="item.id"
                             @click.native="getTicketPrice()">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="门票价格" :label-width="formLabelWidth">
                        <el-input v-model="scenicOrderForm1.price" autocomplete="off" style="width:400px;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="入场时间" :label-width="formLabelWidth">
                        <el-date-picker
                        v-model="scenicOrderForm1.createTime"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单状态" :label-width="formLabelWidth">
                        <el-select v-model="scenicOrderForm1.orderStatus" placeholder="请选择订单状态">
                            <el-option
                            v-for="item in orderStatus"
                            :key="item.id"
                            :label="item.status"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateOredr()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    const axios = require('axios');
    export default {
        data(){ 
            return{
                loading:true,
                tableData:[],
                page:{
                    pageSize:5,//条数
                    pageNum:1,//页数
                    total:0
                },
                currentPage4: 1,
                total:0,
                loginName:"",
                formLabelWidth: '140px',
                scenicOrderForm:{
                    loginName:'',
                    name:'',
                    identity:'',
                    price:'',
                    scenicName:'',
                    createTime:'',
                    orderStatus:'',
                },
                scenicOrderForm1:{
                    id:'',
                    loginName:'',
                    name:'',
                    identity:'',
                    price:'',
                    scenicName:'',
                    createTime:'',
                    orderStatus:'',
                    scenicId:'',
                    provinceId:'',
                    cityId:''
                },
                provinceId:'',
                pid:0,
                one:[],
                cityId:'',
                two:[],
                scenicId:'',
                three:[],
                price:'',
                orderStatus:[],
                scenicName:'',
                dialogVisible: false,
                dialogVisibleUpd: false
            }
        },
        mounted(){
            this.getOredrByPage(),
            this.getProvince(),
            this.getOrderStatus()
        },
        methods:{
            // 分页
            handleSizeChange(ps) {
                this.page.pageSize=ps;
                this.getOredrByPage()
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(pn) {
                this.page.pageNum=pn;
                this.getOredrByPage()
            },
             //时间重新定义格式//编辑时回显用该方法this.StrToGMT('2020-10-27 09:23')转换成Tue Oct 27 2020 09:23:00 GMT+0800 
            StrToGMT(time) {
                let GMT = new Date(time);
                return GMT;
            },
            //时间重新定义格式//编辑时回显用该方法this.dateValue Oct 27 2020 09:23:00 GMT+0800 转换成('2020-10-27 09:23')
            dateValue(time) {
                let d = new Date(time);
                const resDate =
                    d.getFullYear() +
                    "-" +
                    this.monthOrDay(d.getMonth() + 1) +
                    "-" +
                    this.monthOrDay(d.getDate()) +
                    " " +
                    this.monthOrDay(d.getHours()) +
                    ":" +
                    this.monthOrDay(d.getMinutes());
                return resDate;
                },
            //查询省份（三级联动）(一级)
            getProvince(){
                axios.get('http://127.0.0.1:8082/ticket/getProvinceAllList?pid=' + this.pid)
                .then((res) => {
                    this.one = res.data.obj
                })
            },
             //查询城市（三级联动）（二级）
            getCity(){
                //this.productForm.cityId=''
                //this.productForm.scenicId=''
                axios.get('http://127.0.0.1:8082/ticket/getCityAllList?provinceId=' + this.provinceId)
                .then((res) => {
                    this.two = res.data.obj
                })
            },
            //查询景区（三级联动）（三级）
            getScenic(){
                axios.get('http://127.0.0.1:8082/ticket/getScenicAllList?cityId=' + this.cityId)
                .then((res) => {
                    this.three = res.data.obj
                })
            },
            //查询景区票价
            getTicketPrice(){
                axios.get('http://127.0.0.1:8082/scenic/getTicketPrice?Id=' + this.scenicId)
                .then((res) => {
                    this.scenicOrderForm.scenicName = res.data.obj[0].scenicName,
                    this.scenicOrderForm1.scenicName = res.data.obj[0].scenicName,
                    this.scenicOrderForm.price = res.data.obj[0].price
                    this.scenicOrderForm1.price = res.data.obj[0].price
                })
            },
            //查询订单状态
            getOrderStatus(){
                axios.get('http://127.0.0.1:8082/orders/orderstatus/getOrderStatus')
                .then((res) => {
                    debugger
                    this.orderStatus = res.data.obj
                })
            },
           //订单信息分页查询全部
            getOredrByPage () {
            axios.get('http://127.0.0.1:8082/orders/ScenicOrders/getScenicOredrByPage', {
                    params: {
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                    loginName : this.loginName
                    }
                })
                .then((res) => {
                    this.loading = false
                    this.tableData = res.data.obj.content
                    this.page.total = res.data.obj.total
                })
            }, 
            //新增门票
            saveOredr(){ 
                var formdata = new FormData();
                formdata.set("loginName",this.scenicOrderForm.loginName)
                formdata.set("provinceId",this.value)
                formdata.set("cityId",this.value1)
                formdata.set("scenicId",this.value2)
                formdata.set("name",this.scenicOrderForm.name)
                formdata.set("identity",this.scenicOrderForm.identity)
                formdata.set("price",this.scenicOrderForm.price)
                formdata.set("createTime",this.scenicOrderForm.createTime)
                formdata.set("scenicName",this.scenicOrderForm.scenicName)
                formdata.set("orderStatus",this.scenicOrderForm.orderStatus)
                axios.post('http://127.0.0.1:8082/orders/ScenicOrders/saveScenicOrder', formdata)
                .then(res => {
                    debugger
                    if (res.data.obj > 0) {
                        this.message('恭喜你，保存数据成功！', 'success')
                        this.dialogVisible = false
                        this.scenicOrderForm = {
                            loginName:"",
                            name:"",
                            identity:"",
                            price:"",
                            scenicName:"",
                            createTime:"",
                            orderStatus:""
                        },
                        this.value = ""
                        this.value1 = ""
                        this.value2 = ""
                        this.getOredrByPage() // 重新渲染数据列表
                    } else {
                        this.message('对不起，保存失败！', 'warning')
                    }
                })
            },
            //修改门票
            updateOredr(){ 
                var formdata = new FormData();
                formdata.set("id",this.scenicOrderForm1.id)
                formdata.set("loginName",this.scenicOrderForm1.loginName)
                formdata.set("scenicId",this.value2)
                formdata.set("name",this.scenicOrderForm1.name)
                formdata.set("identity",this.scenicOrderForm1.identity)
                formdata.set("price",this.scenicOrderForm1.price)
                formdata.set("createTime",this.scenicOrderForm1.createTime)
                formdata.set("scenicName",this.scenicOrderForm1.scenicName)
                formdata.set("orderStatus",this.scenicOrderForm1.orderStatus)
                axios.post('http://127.0.0.1:8082/orders/ScenicOrders/updateScenicOrder', formdata)
                .then(res => {
                    debugger
                    if (res.data.obj > 0) {
                        this.message('恭喜你，修改数据成功！', 'success')
                        this.dialogVisibleUpd = false
                        this.scenicOrderForm1 = {
                            loginName:"",
                            name:"",
                            identity:"",
                            price:"",
                            scenicName:"",
                            createTime:"",
                            orderStatus:""
                        },
                        this.getOredrByPage() // 重新渲染数据列表
                    } else {
                        this.message('对不起，保存失败！', 'warning')
                    }
                })
            },
            //x
            scenicOrderEdit (row) {
                console.log(row.orderStatus)
                this.dialogVisibleUpd = true
                this.scenicOrderForm1.id = row.id
                this.scenicOrderForm1.scenicId = row.scenicId
                this.scenicOrderForm1.provinceId = row.provinceId
                this.scenicOrderForm1.cityId = row.cityId
                this.scenicOrderForm1.value1 = row.value1
                this.scenicOrderForm1.value2 = row.value2
                this.scenicOrderForm1.loginName = row.loginName
                this.scenicOrderForm1.name = row.name
                this.scenicOrderForm1.identity = row.identity
                this.scenicOrderForm1.price = row.price
                this.scenicOrderForm1.scenicName = row.scenicName
                this.scenicOrderForm1.createTime = this.StrToGMT(row.createTime)
                this.scenicOrderForm1.orderStatus = row.orderStatus
                this.getCity()
                this.getScenic()
                this.getOrderStatus()
            },
            //删除
            removeDataById (id) {
            this.$confirm('此操作将永久删除该信息不可撤销, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
            ).then(() => {
                axios.delete('http://127.0.0.1:8082/orders/ScenicOrders/delScenicOrder?id=' + id)
                .then(res => {
                    if (res.data.obj > 0) {
                    this.getOredrByPage() // 重新渲染数据列表
                    } else {
                    this.message('删除失败', 'warning')
                    }
                })
            })
            },
            message (message, type) {
                this.$message({
                    message: message,
                    type: type
                })
            }
        },

    }
</script>

<style>
/**
* 附件上传样式
*/
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.box-card {
    height: 100%;
}
</style>
